<template>
  <el-dialog
    title=""
    :visible.sync="show"
    @close="getClose()"
    width="80%"
  >
    <div class="dialog-tab">
      <template v-if="showType === 'both'">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="tabTitle[0].label" :name="tabTitle[0].name" lazy>
            <Description :descriptions-list="descriptionsList" :info="descriptionsInfo" />
          </el-tab-pane>
          <el-tab-pane :label="tabTitle[1].label" :name="tabTitle[1].name" lazy>
            <basic-table
              :table-title="tableTitle"
              :data-source="dataSource"
              :data-params="params"
              :multiple-table="false"
              class="mt-4"
              :reload="reload"
              @closeReload="closeReload"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else-if="showType === 'description'">
        <Description :descriptions-list="descriptionsList" :info="descriptionsInfo" />
      </template>
      <template v-else-if="showType === 'table'">
        <basic-table
          :table-title="tableTitle"
          :data-source="dataSource"
          :data-params="params"
          :multiple-table="false"
          class="mt-4"
          :reload="reload"
          @closeReload="closeReload"
        />
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="getClose()">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Description from '@/components/Description/Index'
import BasicTable from '@/components/BasicTable/index.vue'
import { getList } from '@/utils'

export default {
  name: 'Index',
  components: { Description, BasicTable },
  props: {
    descriptionsList: { type: Object, default: () => {} },
    descriptionsInfo: { type: Object, default: () => {} },
    showType: { type: String, default: 'description' }, // description or table or both
    dataSource: { type: Function, default: () => {} },
    dataParams: { type: Object, default: () => {} },
    tabTitle: {
      type: Array,
      default: () => [
        { name: 'description', label: '详细信息' },
        { name: 'table', label: '相关企业/人员' }
      ]
    },
    tableTitle: { type: Array, default: () => [] },
    show: { type: Boolean, default: false }
  },
  data() {
    return {
      params: {},
      activeName: '1',
      reload: false
    }
  },
  computed: {
  },
  watch: {
    dataParams(newVal) {
      this.params = { ...this.params, ...newVal ?? {}}
    }
  },
  created() {
    if (this.tabTitle) {
      this.activeName = this.tabTitle[0].name
    }
  },
  methods: {
    closeReload(val) {
      this.reload = val
    },
    getClose() {
      this.activeName = this.tabTitle[0].name

      this.$emit('close', false)
    },
    handleClick(tab, event) {
      this.activeName = tab.name
      if (this.activeName === 'table') {
        this.reload = true
      }
    }
  }
}
</script>

<style scoped>

</style>
